<template>
    <div>
        <div v-for="item in routerList" :key="item.path">
            <div v-if="item.children.length === 0">
                <!--没有子路由-->
                <el-menu-item :index="'/' + item.path" @click="goRoute">
                    <!-- <el-icon>
          <component :is="item.meta.icon"></component>
        </el-icon> -->
                    <template #title>
                        <span>{{ item.name }}</span>
                    </template>
                </el-menu-item>
            </div>

            <!--没有子路由且只有一个子路由-->
            <div v-if="item.children && item.children.length == 1">
                <el-menu-item :index="'/' + item.children[0].path" @click="goRoute">
                    <!-- <el-icon>
          <component :is="item.children[0].meta.icon"></component>
        </el-icon> -->
                    <template #title>
                        <span>{{ item.children[0].name }}</span>
                    </template>
                </el-menu-item>
            </div>

            <el-submenu v-if="item.children && item.children.length > 1">
                <template slot="title">
                    <span>{{ item.name }}</span>
                </template>

                <el-menu-item-group>
                    <el-menu-item :index="'/' + group.path" v-for="group in item.children">{{ group.name }}</el-menu-item>
                </el-menu-item-group>

                <!-- <MenuItem :routerList="item.children" /> -->
            </el-submenu>
        </div>
    </div>
</template>
<script>
import MenuItem from "@/views/MenuItem.vue";
export default {
    components: { MenuItem },
    props: ['routerList'],

    methods: {
        goRoute(route) {
            if (route.index !== this.$route.path) {
                console.log('666', route.index);
                this.$router.push(route.index)
            }

        }
    }
}
</script>
